<template>
  <div class='page-content'>
    <div class='index-content' v-show="tabActive === 0">
      <p class='hd-time'>活动时间：6.12-8.31</p>
      <div class='lottery-box'>

        <!--大转盘 st-->
        <div class='lottery-content'>
          <div class='turnplate'>
            <!--<canvas class='item' width='422px' height='422px'></canvas>-->
            <lottery-canvas :onePrizeData.sync="onePrizeData" :showPrizeDialog.sync="showPrizeDialog" ref="lotterycanvas" :prizes="prizeList" :times="times"></lottery-canvas>
            <img class='pointer' @click="getPrize()" src='../assets/imgs/start_btn.png'>
          </div>
          <p class='lottery-shadow'></p>
          <p class='today-times'>今日还有<span class='J_times'>{{times}}</span>次抽奖机会</p>
        </div>

        <!--活动说明+增加抽奖次数 ed-->

        <div class='activity-desc' :class="{'pd50':luckyList.length}">
          <h3 class='title'>
            <img src='../assets/imgs/active_title.png'>
          </h3>
          <p>
            1.活动时间：6.12-8.31<br>
            2.真题讲评视频每观看6个视频可获得一次抽奖机会，I卷、II卷、III卷全部观看完，共可获得三次抽奖机会<br/>
            3.活动奖品：<br/>
            一等奖2018志愿填报指导卡<br/>
            二等奖现金红包<br/>
            三等奖2019高考45套1本<br/>
            四等奖40元代金券<br/>
            五等奖20元代金券<br/>
            六等奖10元代金券<br/>
            4.兑奖说明：<br/>
            a.点击”戳我“即可开启转盘抽奖。<br/>
            b.活动期间，每位用户有三次抽奖机会！<br/>
            c.中奖的用户，请按照提示完成个人信息填写。请保
            证参加本次活动时提交的个人信息真实、准确、有效，
            如因信息有误导致奖品无法发送，我方视为用户放弃
            奖品。<br/>
            d.微店代金卷满200元可以使用，不可转赠他人，不
            能叠加使用。<br/>
          </p>
        </div>
      </div>
    </div>

    <!--我的奖品-->
    <div class='prize-list' v-show="tabActive === 1">
      <h1><img src='../assets/imgs/tit.png' alt=''></h1>
      <ul class='prize-table' v-if="myPrize.length">
        <li v-for="item in myPrize"><span class='item-1'>{{item.weixin}}</span><span class='item-2'>{{item.zjtime}}</span><span class='item-3'>{{item.title}}</span></li>
      </ul>
      <p v-else>抱歉，您暂时还没有奖品哦</p>
    </div>
    <div @click="showRecordDialog = true" class="lucky-list" v-if="luckyList.length">
      <span><img src="../assets/imgs/info_icon.png" alt=""></span>
      <ul :style="{'transform':'translateY(-'+ hotNewsTransY +'px)', 'transition-duration':hotNewsTransDuration + 'ms'}">
        <li v-for="item in luckyList">恭喜 {{item.weixin}}抽中 {{item.title}}</li>
      </ul>
      <span>最新中奖纪录></span>
    </div>
    <div class='footer-box' data-current='active'>
      <div class='tab-item' :class="{'active':tabActive===0}" @click="tabActive = 0">首页</div>
      <div class='tab-item' :class="{'active':tabActive===1}" @click="tabActive = 1">我的奖品</div>
    </div>
    <record-dialog :visible.sync="showRecordDialog" :data="luckyListOri"></record-dialog>
    <prize-dialog :visible.sync="showPrizeDialog" :data="onePrizeData"></prize-dialog>
    <result-dialog :visible.sync="isShowResult" :type="type"></result-dialog>
  </div>
</template>
<script>
  import RecordDialog from './record_dialog'
  import PrizeDialog from './prize_dialog'
  import LotteryCanvas from './lottery_canvas'
  import ResultDialog from './result_dialog'
  import base from '../baseurl'
  export default {
    name: 'index',
    data () {
      return {
        baseurl: base.BASE,
        isShowResult: false,
        type: '',
        showRecordDialog: false,
        showPrizeDialog: false,
        onePrizeData: '',
        tabActive: 0,
        hotNewsTransY: 0,
        hotNewsTransDuration: 500,
        hotNewsTransDelay: 4000,
        luckyListOri: '',
        luckyList: '',
        myPrize: [
          {
            nick: '微信昵称1',
            date: '2018-5-23',
            prize: '10元代金券'
          },
          {
            nick: '微信昵称2',
            date: '2018-5-23',
            prize: '20元代金券'
          },
          {
            nick: '微信昵称3',
            date: '2018-5-23',
            prize: '30元代金券'
          },
          {
            nick: '微信昵称4',
            date: '2018-5-23',
            prize: '40元代金券'
          }
        ],
        prizeList: '',
        times: 0
      }
    },
    components: {
      RecordDialog,
      PrizeDialog,
      LotteryCanvas,
      ResultDialog
    },
    // watch: {
    //   luckyList: {
    //     handler (v) {
    //       if (v.length) {
    //         // 滚动资讯需要动态排序
    //         this.luckyList = v
    //         // 启动快讯轮播定时器
    //         this.Interval()
    //       }
    //     },
    //     immediate: true
    //   }
    // },
    created () {
      this.getData()
      this.$nextTick(() => {
        this.intervalList()
      })
    },
    methods: {
      getData () {
        let _this = this
        $.get(_this.baseurl + 'lotterynew.php?lid=13&action=info', function (data) {
          _this.prizeList = data.prize
          _this.times = data.prizenum
          _this.myPrize = data.myprize
          _this.luckyList = _this.luckyListOri = data.newprize
        }, 'json')
      },
      getPrize () {
        if (this.times > 0) {
          this.$refs.lotterycanvas.beginLottery()
        } else {
          this.isShowResult = true
          this.type = 'notimes'
        }
      },
      intervalList () {
        if (!this.luckyList.length) {
          return
        }
        let len = this.luckyList.length
        let delay = this.hotNewsTransDelay
        let duration = this.hotNewsTransDuration
        let scrollBtm = (len - 1) * 42
        setInterval(() => {
          this.hotNewsTransDuration = duration
          this.hotNewsTransY = this.hotNewsTransY + 42
          setTimeout(() => {
            if (this.hotNewsTransY === scrollBtm) {
              this.luckyList = _.concat(this.luckyList.slice(1), this.luckyList.slice(0, 1))
              this.hotNewsTransDuration = 0
              this.hotNewsTransY = 0
            }
          }, duration)
        }, delay)
      }
    }
  }
</script>

<style lang='less'>
  * {
    margin: 0;
    padding: 0;
    }

  html {
    height: 100%;
    }

  body {
    font-family: 'Microsoft yahei', 'Open Sans', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background: #FFED5D;
    position: relative;
    }

  ol, ul {
    list-style: none;
    }
  .tc{text-align:center}
  .pd50{padding-bottom:50px!important;}
  .index-content {
    background: #FFED5D url(../assets/imgs/top_bg.jpg) 50% 0 no-repeat;
    background-size: 100% auto;
    padding-top: 169px;
    padding-top: 38vw;
    .hd-time{
      color:#f16100;
      font-size:16px;
      }
    }
  /*滚动通知*/
  .lucky-list{
    position: fixed;
    bottom: 50px;
    left: 0;
    height: 42px;
    overflow: hidden;
    background:#FE7934;
    color:#ffffff;
    width:100%;
    padding:0 10px;
    span{
      display:inline-block;
      line-height:42px;
      img{
        width:20px;
        vertical-align:middle;
        margin-right:8px;
        }
      }
    span:first-child{
      float:left;
      }
    span:last-child{
      float:right;
      width:96px;
      }
    ul{
      float:left;
      width:calc(100% - 142px);
      li{
        line-height:42px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        }
      }
    }
  /* 大转盘 */
  .lottery-box {
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    padding: 15px 0 50px 0;
    overflow: hidden;
    }

  .lottery-content {
    text-align: center;
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    .today-times {
      margin-top: 15px;
      text-align: center;
      color: #AA6D23;
      font-size: 13px;
      span {
        font-size: 1.2em;
        color: #F16101;
        margin: 0 0.3em;
        }
      }
    .lottery-shadow{
      width: 212px;
      height: 26px;
      background: url('../assets/imgs/lottory_shadow.png');
      background-size: contain;
      margin: -20px auto 0;
      }
    .weidian-link-btn {
      margin: 10px auto 0;
      display: block;
      width: 230px;
      height: 40px;
      overflow: hidden;
      img {
        max-width: 100%;
        }
      }
    }

  .lottery-content .turnplate {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    padding: 12px;
    box-sizing: border-box;
    background: url(../assets/imgs/wheel_wrap.png) no-repeat 0 0 ~'/' 100% 100%;
    }

  .lottery-content .turnplate canvas.item {
    display: block;
    width: 100%;
    }

  .lottery-content .turnplate img.pointer {
    position: absolute;
    width: 32.5%;
    left: 34.1%;
    top: 22.1%;
    }

  /*活动说明*/
  .activity-desc {
    margin: 0 15px;
    color: #A07E17;
    line-height: 1.6;
    background-color: #FFDF34;
    padding: 5px 20px 20px;
    border-radius: 3px;
    .title {
      width: 92%;
      margin: 10px auto 5px;
      img {
        max-width: 100%;
        }
      }
    p{
      text-align:left;
      }
    }
  /*tabs*/
  .footer-box {
    position: fixed;
    height:50px;
    z-index: 99;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -2px 3px rgba(0, 0, 0, .1);
    .tab-item {
      width: 50%;
      float: left;
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      color: #c2a39f;
      background: #e3dfdf;
      &.active {
        color: #f16100;
        background: #fff;
        }
      }
    }
  /*中奖记录*/
  .prize-list {
    padding: 50px 15px 100px;
    margin-bottom: 40px;
    }

  .prize-list h1 {
    text-align: center;
    img {
      max-width: 300px;
      }
    }

  .prize-table {
    margin-top: 15px;
    border-radius: 5px;
    overflow: hidden;
    li {
      line-height: 40px;
      border-top: 1px solid #ECC80B;
      color: #572800;
      overflow: hidden;
      &:first-child {
        border-top: none;
        }
      span {
        float: left;
        display: block;
        width: 33.33%;
        color:#572800;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.item-2 {
          color: rgba(87, 40, 0, .7);
          }
        }
      }
    }
</style>